import React, { useEffect } from 'react'
import { Form, Radio, Button, Select, Input, Checkbox } from 'antd'
const MqttSet = ({ Mqtt,Update }) => {
    const [form] = Form.useForm();



    console.log(Mqtt)

    useEffect(() => {
        form.setFieldsValue(Mqtt)
    }, [Mqtt])

    const Save = () => {
        form.validateFields().then(values => {
            console.log(values)
            Update("mqtt_config", JSON.stringify(values))
        })
    }

    return (
        <div style={{ marginTop: "3vh" }}>
            <div
                style={{ fontSize: '20px', fontWeight: '550', margin: "30px" }}
            >Mqtt参数配置
            </div>
            <Form
                name="basic"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 650 }}
                autoComplete="off"
                form={form}
            >
                <Form.Item
                    label="Mqtt服务URL"
                    name="url"
                    rules={[{ required: true, message: '请填写Mqtt服务URL' }]}
                >
                    <Input placeholder='填写Mqtt服务URL' />
                </Form.Item>
                <Form.Item
                    label="用户名"
                    name="user"
                    rules={[{ required: true, message: '请填写用户名' }]}
                >
                    <Input placeholder='填写用户名' />
                </Form.Item>

                <Form.Item
                    label="密码"
                    name="pass"
                    rules={[{ required: true, message: '请填写密码' }]}
                >

                    <Input.Password placeholder='填写密码' />
                </Form.Item>

                <Form.Item
                    label="订阅主题"
                    name="channels"
                    rules={[{ required: true, message: '请填写订阅主题' }]}
                >
                    <Input placeholder='填写订阅主题' />

                </Form.Item>


                <Form.Item
                    label="发布方式"
                    name="fabufanshi"

                >
                    <Radio.Group

                        options={[
                            { value: 1, label: '发布到主题名' },
                            { value: 0, label: '发布到UUID' },

                        ]}
                    />
                </Form.Item>
                <Form.Item
                    label="Mqtt是否开机启动"
                    name="autostart"

                >
                    <Radio.Group
                        options={[
                            { value: 1, label: '启动' },
                            { value: 0, label: '不启动' },

                        ]}
                    />
                </Form.Item>


                <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
                    <Button type="primary" htmlType="submit" onClick={Save}>
                        保存并设置
                    </Button>

                </Form.Item>
            </Form>


        </div>
    )
}

export default MqttSet